<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>公告管理</el-breadcrumb-item>
            <el-breadcrumb-item>修改公告</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
            <el-form ref="editform"  :rules="rules" label-width="100px" size="mini" class="demo-ruleForm" :model="editform">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="公告标题:" prop="title">
                            <el-input v-model="editform.title"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" >
                    <el-col :span="6" >
                        <el-form-item label="公告内容:" prop="content">
                            <el-input type="textarea" v-model="editform.content" :style="{width:'300px',height:'250px'}"></el-input>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="2">
                        <el-form-item>
                            <el-button type="primary" size="small" @click="editbtn(editform)">提交</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item>
                            <el-button size="small" type="warning" @click="resetForm('editform')">重置</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item>
                            <el-button size="small" @click="$router.push('/notice')">返回</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    created(){
        //初始化表单数据
        this.getNoticeById();
    },
    data() {
        return {
            editform: {
                title: "",
                content: "",
              
            },
            rules: {
                title: [
                    { required: true, message: "请输入公告名称", trigger: "blur" },
                    { min: 3, max: 15, message: "长度在 3 到 10 个字符", trigger: "blur" }
                ],
                content: [
                    { required: true, message: "请输入公告内容", trigger: "blur" },
                    // { min: 3, max: 200, message: "长度在 3 到 10 个字符", trigger: "blur" }
                ],
                
            }
        };
    },
    methods: {
        async getNoticeById() {
                const res  = await this.$http.get(`/notice/show/${this.$route.query.noticeid}`);
                //   console.log('传递回来的公告内容:', JSON.stringify(res, null, 2));  // 转换为字符串并格式化
                  this.editform=res.data.data
        },
      
        
        async editbtn() {
            this.$refs.editform.validate(async(valid) => {
                if (valid) {
                    // 发送请求
                    const {data : res}  = await this.$http.put("/notice/update",this.editform);
                    
                    if (res.code == 200) {
                        this.$message({
                            message: "修改成功",
                            type: "success"
                        });
                        this.$router.push("/notice");
                    } else {
                        this.$message.error("修改失败");
                    }
                    
                } else {
                    this.$message.error("表单验证失败，请检查输入"); // 提示用户
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    }
};
</script>

<style>
.el-textarea .el-textarea__inner{
    height: 250px;
}
</style>